<template>
  <!-- 购物车通用模板 -->
  <div class="chart">
    <van-card
      v-for="(item, index) in chartLsit"
      :key="index"
      :tag="item.tag"
      :price="Number(item.price).toFixed(2)"
      :desc="item.content"
      :title="item.title"
      :origin-price="item.originalPrice"
      @click="goDetail(item.id)"
    >
      <template #thumb>
        <div class="img_box">
          <van-swipe lazy-render>
            <van-swipe-item
              style="height:200px;"
              v-for="(items,indexs)  in   item.imgList "
              :key="indexs"
              @click.stop="bigImg(index,indexs)"
              fit="contain"
            >
              <van-image :src="items" class="swip_img lostFound_Ul_li_lostFound_img">
                <template v-slot:loading>
                  <van-loading size="20px" vertical>加载中...</van-loading>
                </template>
              </van-image>
            </van-swipe-item>
          </van-swipe>
        </div>
      </template>
      <template #num>
        <slot name="num"></slot>
      </template>

      <template #footer>
        <slot name="btn1"></slot>
        <slot name="btn2"></slot>
      </template>
    </van-card>
    <slot></slot>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  props: {
    chartLsit: {
      type: Array,
    },
  },

  methods: {
    // 跳转遗失物品详情页面
    goDetail(itemId) {
      this.$router.push('/yieldDetail/' + itemId)
    },

    // 图片大图预览
    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.chartLsit[index].imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
  },
}
</script>

<style scoped>
.img_box img {
  width: 100%;
}
.content {
  padding: 16px 16px 160px;
}
</style>
